<template>
  <div>
    <el-form ref="editForm" :model="editForm" label-width="80px" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="editForm.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="editForm.password" type="password" placeholder="密码" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="editForm.email" placeholder="邮箱" />
      </el-form-item>
      <el-form-item label="家庭住址">
        <el-input v-model="editForm.address" placeholder="家庭住址" />
      </el-form-item>
      <el-form-item label="传真">
        <el-input v-model="editForm.fax" placeholder="传真" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="editForm.mobile" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="座机号">
        <el-input v-model="editForm.landlineNumber" placeholder="座机号" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editForm.remark" placeholder="备注" />
      </el-form-item>
      <el-form-item label="所属部门">
        <el-input v-model="editForm.deptName" readonly placeholder="所属部门" @focus="deptDialog" />
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox-group v-model="checkedroles" @change="handleCheck">
          <el-checkbox v-for="role in roles" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="城市地区">
        <el-cascader
          v-model="pcd"
          :options="regions"
          :props="regionsProps"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="商圈">
        <el-checkbox-group v-model="checkedBusiness" @change="checkBus">
          <el-checkbox v-for="business in businesses" :key="business.id" :label="business.id">{{ business.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="editForm.status" :label="0">禁用</el-radio>
        <el-radio v-model="editForm.status" :label="1">正常</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="edit('editForm')">保存</el-button>
        <el-button @click="qvxiao()">取消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="选择部门"
      :visible.sync="deptDialogVisible"
      width="30%"
    >
      <el-tree
        ref="tree"
        :data="depts"
        node-key="deptId"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      businesses: [],
      checkedroles: [],
      deptDialogVisible: false,
      depts: [],
      editForm: {},
      defaultProps: {
        children: 'sysDeptList',
        label: 'name'
      },
      pcd: [],
      regions: [],
      regionsProps: {
        value: 'regionId',
        label: 'regionName',
        children: 'regions'
      },
      roles: [],
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      },
      checkedBusiness: []
    }
  },
  created() {
    this.initUser()
    this.initDept()
    this.initRegion()
  },
  methods: {
    checkBus(val) {
      this.checkedBusiness = val
      this.editForm.businessCircleIdList = val
    },
    handleCheck(val) {
      this.checkedroles = val
      this.editForm.roleIdList = val
    },
    deptDialog() {
      this.deptDialogVisible = true
    },
    handleNodeClick(data) {
      this.editForm.deptName = data.name
      this.editForm.deptId = data.deptId
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/system-management/sysRoleDept/getAllRoles',
        params: {
          deptId: data.deptId
        }
      }).then((res) => {
        if (res.data) {
          this.roles = res.data.obj
          this.deptDialogVisible = false
        }
      })
    },
    qvxiao() {
      this.$router.replace({ path: 'sysUser' })
    },
    initUser() {
      var userId = localStorage.getItem('userId')
      if (userId > 0) {
        this.axios({
          method: 'post',
          url: 'http://localhost:9999/system-management/sysUser/getUserById',
          params: {
            userId: userId
          }
        }).then((res) => {
          if (res.data.obj.sysuser) {
            this.editForm = res.data.obj.sysuser
            this.pcd[0] = parseInt(res.data.obj.sysuser.province)
            this.pcd[1] = parseInt(res.data.obj.sysuser.city)
            this.pcd[2] = parseInt(res.data.obj.sysuser.country)
          }
          if (res.data.obj.deptRoles) {
            this.roles = res.data.obj.deptRoles
          }
          if (res.data.obj.userRoles) {
            this.checkedroles = res.data.obj.userRoles
          }
          if (res.data.obj.businessCircle) {
            this.businesses = res.data.obj.businessCircle
          }
          if (res.data.obj.businessCircleIdList) {
            this.checkedBusiness = res.data.obj.businessCircleIdList
          }
        })
      }
    },
    edit(formName) {
      if (this.pcd.length > 0) {
        this.editForm.province = this.pcd[0]
        this.editForm.city = this.pcd[1]
        this.editForm.country = this.pcd[2]
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'http://localhost:9999/system-management/sysUser/edit',
            data: this.editForm
          }).then((res) => {
            if (res.data.obj) {
              this.$router.replace({ path: 'sysUser' })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleChange(value) {
      console.log(JSON.stringify(value) + '!!!!')
      /* var name=this.$refs["cascader"].getCheckedNodes()[0].pathLabels;//获取省市区名称
       console.log(name+"==============================")*/
      // 记录改变值
      this.pcd = value
      console.log(this.pcd)
      /*  this.addr = name[0]+name[1]+name[2]
        console.log(this.addr+"------------------------")*/
      if (this.pcd[2]) {
        this.code = this.pcd[2]
        this.axios({
          method: 'post',
          url: 'http://localhost:9999/system-management/tbBusinessCircle/listByCountyId',
          params: {
            code: this.code
          }
        }).then((res) => {
          if (res.data.obj) {
            this.businesses = res.data.obj
          }
        })
      }
    },
    initDept() {
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/system-management/sysDept/list',
        params: {
        }
      }).then((res) => {
        if (res.data) {
          this.depts = res.data.obj
        }
      })
    },
    initRegion() {
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/system-management/sysRegion/list',
        params: {
        }
      }).then((res) => {
        if (res.data) {
          this.regions = res.data.obj
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
